<template>
  <!--盘点-->
  <div class="app-container">
    <el-form class="jc_search_wrap" v-model="searchList">
      <label>盘点时间</label>
      <el-input  type="date" v-model="pl88"></el-input>
      <el-button @click="searchRows"><i class="el-icon-search"></i>搜索</el-button>
    </el-form>
    <el-button-group class="jc_btn_wrap jc_btn_left">
      <el-button @click="createRow"><i class="jc_icon el-icon-plus"></i>新增盘点单</el-button>
      <el-button @click="deleteRow"><i class=""></i>删除</el-button>
    </el-button-group>
    <el-button-group class="jc_btn_wrap jc_btn_right">
      <el-button @click=""><i class=""></i>导出</el-button>
    </el-button-group>
    <el-table :data="list" :height="tableHeight_top" v-loading.body="listLoading" element-loading-text="拼命加载中" border fit highlight-current-row class="jc_table_wrap" ref="multipleTable" @selection-change="handleSelectionChange">
      <el-table-column  type="selection">
      </el-table-column>
      <el-table-column label='操作'>
        <template scope="scope">
          {{scope.row.name}}
        </template>
      </el-table-column>
      <el-table-column label="盘点单号">
        <template scope="scope">
          {{scope.row.description}}
        </template>
      </el-table-column>
      <el-table-column label="盘点日期">
        <template scope="scope">
          {{scope.row.description}}
        </template>
      </el-table-column>
      <el-table-column label="仓库">
        <template scope="scope">
          {{scope.row.description}}
        </template>
      </el-table-column>
      <el-table-column label="操作人">
        <template scope="scope">
          {{scope.row.description}}
        </template>
      </el-table-column>
      <el-table-column label="盘盈货品">
        <template scope="scope">
          {{scope.row.description}}
        </template>
      </el-table-column>
      <el-table-column label="盘亏货品">
        <template scope="scope">
          {{scope.row.description}}
        </template>
      </el-table-column>
      <el-table-column label="出库备注">
        <template scope="scope">
          {{scope.row.description}}
        </template>
      </el-table-column>
    </el-table>
    <el-pagination layout="prev, pager, next" :total="total" @current-change="changePage" :page-size="15"/>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <!--盘点明细------------------------------------------------------------------------------------------------------->
      <el-tab-pane label="盘点明细" name="first">
        <el-table :data="list"  :height="tableHeight_bottom" v-loading.body="listLoading" element-loading-text="拼命加载中" border fit highlight-current-row class="jc_table_wrap" ref="multipleTable" @selection-change="handleSelectionChange">
          <el-table-column  type="index" width="200px" >
          </el-table-column>
          <el-table-column label='备件编号'>
            <template scope="scope">
              {{scope.row.name}}
              </template>
          </el-table-column>
          <el-table-column label="备件名称">
            <template scope="scope">
              {{scope.row.description}}
              </template>
          </el-table-column>
          <el-table-column label="规格型号">
            <template scope="scope">
              {{scope.row.description}}
              </template>
          </el-table-column>
          <el-table-column label="计量单位">
            <template scope="scope">
              {{scope.row.description}}
              </template>
          </el-table-column>
          <el-table-column label="账面数量">
            <template scope="scope">
              {{scope.row.description}}
              </template>
          </el-table-column>
          <el-table-column label="实际数量">
            <template scope="scope">
              {{scope.row.description}}
              </template>
          </el-table-column>
          <el-table-column label="盘盈数量">
            <template scope="scope">
              {{scope.row.description}}
              </template>
          </el-table-column>
          <el-table-column label="盘亏数量">
            <template scope="scope">
              {{scope.row.description}}
              </template>
          </el-table-column>
          <el-table-column label="备注">
            <template scope="scope">
              {{scope.row.description}}
              </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>

  </div>
</template>

<script>

  import {getRoleList} from "../../api/system";

  export default {
    components: {

    },
    data() {
      return {
        searchList: {},
        list: null,
        activeName: 'first',
        total:0,
        multipleSelection: [],
        pl88: '',
      }

    },
    filters: {
      statusFilter(status) {
        const statusMap = {
          published: 'success',
          draft: 'gray',
          deleted: 'danger'
        };
        return statusMap[status]
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      fetchData(p=1) {
        this.listLoading = true;
        var params = this.searchList;
        params.page = p;
        getRoleList(params).then(data => {
          this.list = data.data.rows;
          this.total = parseInt(data.data.totalCount);
          this.listLoading = false;
        })
      },
      searchRows() {
        this.fetchData()
      },
      emptyInputs() {
        this.searchList = {
          search_LIKE_name: ''
        };
        this.fetchData()
      },
      createRow() {
        this.$router.push({path:'/warehouse/inventory_addDialog'});
      },
      submitCreateForm() {

      },
      editRow(row) {

      },
      submitEditForm() {

      },
      deleteRow() {
        alert('用this.multipleSelection获得要删除的数据');
        console.log('this.multipleSelection',this.multipleSelection);
      },
      roleAssignment() {

      },
      changePage(p) {
        this.fetchData(p)
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      handleClick(tab, event) {
        console.log(tab, event);
      }
    },
    computed: {
      tableHeight() {
        const filterHeight = 28;
        var tableHeight = this.getTableHeight(filterHeight);
        return tableHeight;
      },
      tableHeight_top() {
        const filterHeight = 28;
        var tableHeight = this.getTableHeight(filterHeight);
        return tableHeight/2-10;
      },
      tableHeight_bottom() {
        const filterHeight = 100;
        var tableHeight = this.getTableHeight(filterHeight);
        return tableHeight/2-10;
      },
    }
  }
</script>
